"use client"

import {
   BadgeCheck,
   Bell,
   Check,
   ChevronRight,
   ChevronsUpDown,
   CreditCard,
   LogOut,
   Plus,
   Sparkles,
} from "lucide-react"
import * as React from "react"

import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
} from "~/registry/miami/ui/breadcrumb"
import { Calendar } from "~/registry/miami/ui/calendar"
import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
} from "~/registry/miami/ui/collapsible"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"
import { Separator } from "~/registry/miami/ui/separator"
import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
} from "~/registry/miami/ui/sidebar"

// This is sample data.
const data = {
   user: {
      name: "nyxb",
      email: "m@example.com",
      avatar: "/avatars/nyxb.jpg",
   },
   calendars: [
      {
         name: "My Calendars",
         items: ["Personal", "Work", "Family"],
      },
      {
         name: "Favorites",
         items: ["Holidays", "Birthdays"],
      },
      {
         name: "Other",
         items: ["Travel", "Reminders", "Deadlines"],
      },
   ],
}

export const iframeHeight = "800px"

export const description = "A sidebar with a calendar."

export default function Page() {
   return (
      <SidebarProvider>
         <AppSidebar />
         <SidebarInset>
            <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
               <SidebarTrigger className="-ml-1" />
               <Separator orientation="vertical" className="mr-2 h-4" />
               <Breadcrumb>
                  <BreadcrumbList>
                     <BreadcrumbItem>
                        <BreadcrumbPage>October 2024</BreadcrumbPage>
                     </BreadcrumbItem>
                  </BreadcrumbList>
               </Breadcrumb>
            </header>
            <div className="flex flex-1 flex-col gap-4 p-4">
               <div className="grid auto-rows-min gap-4 md:grid-cols-5">
                  {Array.from({ length: 20 }).map((_, i) => (
                     <div
                        key={i}
                        className="aspect-square rounded-xl bg-muted/50"
                     />
                  ))}
               </div>
            </div>
         </SidebarInset>
      </SidebarProvider>
   )
}

function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
      <Sidebar {...props}>
         <SidebarHeader className="h-16 border-b border-sidebar-border">
            <NavUser user={data.user} />
         </SidebarHeader>
         <SidebarContent>
            <DatePicker />
            <SidebarSeparator className="mx-0" />
            <Calendars calendars={data.calendars} />
         </SidebarContent>
         <SidebarFooter>
            <SidebarMenu>
               <SidebarMenuItem>
                  <SidebarMenuButton>
                     <Plus />
                     <span>New Calendar</span>
                  </SidebarMenuButton>
               </SidebarMenuItem>
            </SidebarMenu>
         </SidebarFooter>
         <SidebarRail />
      </Sidebar>
   )
}

function Calendars({
   calendars,
}: {
   calendars: {
      name: string
      items: string[]
   }[]
}) {
   return (
      <>
         {calendars.map((calendar, index) => (
            <React.Fragment key={calendar.name}>
               <SidebarGroup key={calendar.name} className="py-0">
                  <Collapsible
                     defaultOpen={index === 0}
                     className="group/collapsible"
                  >
                     <SidebarGroupLabel
                        asChild
                        className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                     >
                        <CollapsibleTrigger>
                           {calendar.name}{" "}
                           <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                        </CollapsibleTrigger>
                     </SidebarGroupLabel>
                     <CollapsibleContent>
                        <SidebarGroupContent>
                           <SidebarMenu>
                              {calendar.items.map((item, index) => (
                                 <SidebarMenuItem key={item}>
                                    <SidebarMenuButton>
                                       <div
                                          data-active={index < 2}
                                          className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                                       >
                                          <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
                                       </div>
                                       {item}
                                    </SidebarMenuButton>
                                 </SidebarMenuItem>
                              ))}
                           </SidebarMenu>
                        </SidebarGroupContent>
                     </CollapsibleContent>
                  </Collapsible>
               </SidebarGroup>
               <SidebarSeparator className="mx-0" />
            </React.Fragment>
         ))}
      </>
   )
}

function DatePicker() {
   return (
      <SidebarGroup className="px-0">
         <SidebarGroupContent>
            <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
         </SidebarGroupContent>
      </SidebarGroup>
   )
}

function NavUser({
   user,
}: {
   user: {
      name: string
      email: string
      avatar: string
   }
}) {
   const { isMobile } = useSidebar()

   return (
      <SidebarMenu>
         <SidebarMenuItem>
            <DropdownMenu>
               <DropdownMenuTrigger asChild>
                  <SidebarMenuButton
                     size="lg"
                     className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                  >
                     <Avatar className="h-8 w-8 rounded-lg">
                        <AvatarImage src={user.avatar} alt={user.name} />
                        <AvatarFallback className="rounded-lg">
                           CN
                        </AvatarFallback>
                     </Avatar>
                     <div className="grid flex-1 text-left text-sm leading-tight">
                        <span className="truncate font-semibold">
                           {user.name}
                        </span>
                        <span className="truncate text-xs">{user.email}</span>
                     </div>
                     <ChevronsUpDown className="ml-auto size-4" />
                  </SidebarMenuButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent
                  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                  side={isMobile ? "bottom" : "right"}
                  align="start"
                  sideOffset={4}
               >
                  <DropdownMenuLabel className="p-0 font-normal">
                     <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                        <Avatar className="h-8 w-8 rounded-lg">
                           <AvatarImage src={user.avatar} alt={user.name} />
                           <AvatarFallback className="rounded-lg">
                              CN
                           </AvatarFallback>
                        </Avatar>
                        <div className="grid flex-1 text-left text-sm leading-tight">
                           <span className="truncate font-semibold">
                              {user.name}
                           </span>
                           <span className="truncate text-xs">
                              {user.email}
                           </span>
                        </div>
                     </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                     <DropdownMenuItem>
                        <Sparkles />
                        Upgrade to Pro
                     </DropdownMenuItem>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuGroup>
                     <DropdownMenuItem>
                        <BadgeCheck />
                        Account
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                        <CreditCard />
                        Billing
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                        <Bell />
                        Notifications
                     </DropdownMenuItem>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                     <LogOut />
                     Log out
                  </DropdownMenuItem>
               </DropdownMenuContent>
            </DropdownMenu>
         </SidebarMenuItem>
      </SidebarMenu>
   )
}
